<template>
  <div class="search">
    <div class="search-header">
      <router-link class="search-header-left" to="/">
        <span class="iconfont back-icon">&#xe606;</span>
      </router-link>
      <div class="search-header-content">
        <div class="warrper">
          <span class="iconfont content-icon">&#xe66b;</span>
          <input class="content-input" type="text" placeholder="输入商家、商品名称">
        </div>
      </div>
      <div class="search-header-right">搜索</div>
    </div>
    <div class="search-content">热门搜索</div>
    <div class="search-content-content">
        <router-link 
        class="search-content-foodName" 
        v-for="item of foodList" 
        :key="item.id"
        :to="'/detail/'+item.id">
            {{item.foodName}}
        </router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "HomeSearch",
  data(){
      return{
          foodList:Array
      }
  },
  methods:{
      getHomeInfo() {
        axios.get('/api/food.json')
        .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc(res) {
        res = res.data
        if (res.ret && res.data) {
          const data = res.data
          this.foodList=data.foodList
        }
      }
  },
  mounted(){
      this.getHomeInfo()
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.search{
    display :flex
    flex-direction :column
}
.search-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 1rem;
  line-height: 1rem;
  background: $bgColor;
}
.search-content{
    margin-top :.4rem
    margin-left :.2rem
    font-size :.4rem
}
.search-header-content {
  text-align: center;
}
.search-content-content{
    margin-top :.4rem
    margin-left :.4rem
    display :flex
    flex-direction :row
    flex-flow :wrap
}
.search-content-foodName{
    background :#f7f7f7
    margin-left :.2rem
    margin-right :.2rem
    margin-top :.6rem
    color :#666
    font-size :.32rem
    height :0.5rem
    text-align :center
    padding-top :0.2rem
    border-radius :.1rem
}
.warrper {
  width: 5.8rem;
  flex: 1;
  margin-top: 0.2rem;
  display: flex;
  align-content: center;
  height: 0.6rem;
  padding: 0 0.1rem;
  line-height: 0.6rem;
  border-radius: 0.07rem;
  color: #666;
  background: #fff;
}

.content-input {
  height: 0.58rem;
  padding: 0 0.1rem;
  line-height: 0.58rem;
  border-radius: 0.07rem;
  color: #666;
}

.search-header-left {
  display :flex
  padding-left: 0.2rem;
  font-size: 2rem;
  text-align :center
  color: #fff;
  justify-content :center
}

.search-header-right {
  padding-right: 0.3rem;
  font-size: 0.32rem;
  color: #fff;
}
</style>
